<template>
  <div id="teamPage">
    <van-search v-model="searchText" placeholder="搜索队伍"
                @search="onSearch"/>
    <van-tabs v-model:active="active" @change="onTabChange">
      <van-tab name="public">
        <template #title>
          <van-icon name="friends"/>
          公开
        </template>
      </van-tab>
      <van-tab name="secret">
        <template #title>
          <van-icon name="friends"/>
          加密
        </template>
      </van-tab>
    </van-tabs>
    <div style="margin-bottom: 15px"/>
    <van-button class="add-button" type="primary" icon="plus"
                @click="doAddTeam"/>
    <TeamCardList :teamList="teamList" @listTeam="listTeam"/>
    <van-empty v-if="teamList.length <=0" description="数据为空"/>
  </div>
</template>

<script setup lang="ts">
import {useRouter} from "vue-router";
import TeamCardList from "../components/TeamCardList.vue";
import {onMounted, ref} from "vue";
import myAxios from "../plugins/myAxios.ts";
import {TeamUserVO} from "../models/teamUser";
import {ResponseResult} from "../models/resopnse";
import {showFailToast} from "vant";
import {teamStatusNumEnum} from "../constants/team.ts";

const router = useRouter()

const doAddTeam = () => {
  router.push({
    path: '/team/add'
  })
}

const teamStatus = ref<number>(0)
const active = ref<string>('public')
const searchText = ref<string>('')
/**
 * 切换查询状态
 * @param name
 */
const onTabChange = (name: string) => {
  // 查公开
  if (name === 'public') {
    teamStatus.value = teamStatusNumEnum[name]
    listTeam(searchText.value)
  }
  // 查加密
  else {
    teamStatus.value = teamStatusNumEnum[name]
    listTeam(searchText.value)
  }
}

const teamList = ref<TeamUserVO[]>([])

const listTeam = async (val: string = '') => {
  const res: ResponseResult<TeamUserVO[]> = await myAxios.get('/team/list', {
    params: {
      searchText: val,
      pageNum: 1,
      status: teamStatus.value,
    }
  })
  console.log('res: ', res)
  if (res.code === 0 && res.data) {
    teamList.value = res.data
  } else {
    showFailToast('加载队伍失败')
  }
}

// 页面加载时触发一次
onMounted(() => {
  listTeam()
})
// 搜索
const onSearch = (val: string) => {
  listTeam(val)
}

</script>

<style scoped>

</style>
